<template>
  <div class="LearnBox">
    <el-card class="box-card">
      <div class="header">
        <div class="self_img">
          <div class="block">
            <el-avatar :size="70" :src="$store.state.user.profile.avatar?$store.state.user.profile.avatar:circleUrl"></el-avatar>
          </div>
          <div class="welcome">
            <p v-if="$store.state.user.profile.token">你好，admin</p>
            <p v-else>您还没有<span class="login" @click="$router.push('/login')">登录</span>哦！</p>
          </div>
        </div>
        <div class="h_right">
          <div class="self_info" @click="$router.push('/learningCenter/userInfo')">
            <img class="img_box" src="@/assets/images/self_info.png" />
            <p>个人信息</p>
          </div>
          <div class="self_info" @click="$router.push('/learningCenter/score')">
            <img class="img_box" src="@/assets/images/grade_info.png" />
            <p>成绩查询</p>
          </div>
          <div class="self_info" @click="$router.push('/learningCenter')">
            <img class="img_box" src="@/assets/images/exam_info.png" />
            <p>在学课程</p>
          </div>
        </div>
      </div>
    </el-card>
    <div class="body">
      <router-view></router-view>
      <!-- <corusePanel></corusePanel> -->
    </div>
  </div>
</template>

<script>
// import corusePanel from './cpn/corusePanel.vue'
export default {
  // components: {
  //   corusePanel
  // },
  data() {
    return {
      circleUrl: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
    }
  }
}
</script>

<style lang="less" scoped>
.login {
  color: #409eff;
  text-decoration: underline;
  &:hover {
    cursor: pointer;
  }
}
.LearnBox {
  margin-top: 10px;
}
.self_img {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  .welcome,
  .block {
    padding-left: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.h_right {
  display: flex;
  justify-content: space-between;
  width: 45%;
  padding-right: 50px;
  .self_info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    &:active {
      color: #409eff;
    }
  }

  .img_box {
    width: 48px;
    height: 48px;
    margin-bottom: 10px;
  }
  p {
    font-size: 16px;
  }
}
.header {
  display: flex;
  justify-content: space-between;
  height: 120px;
}
.body {
  padding-top: 5px;
  .learn_info {
    display: flex;
    p {
      padding: 0 10px;
      font-weight: 700;
    }
  }
  .learn_container {
    text-align: center;
    min-height: 400px;
    .container_box {
      margin-bottom: 10px;
      margin-right: 20px;
      width: 160px;
      height: 190px;
      .addImg {
        width: 161px;
        height: 149px;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #eef3f7;
        margin-bottom: 10px;
        &:hover {
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
        }
        img {
          width: 40px;
          height: 40px;
        }
      }
    }
  }
}
</style>>


